<template>
	<view class="flex-col page">
		<view class="flex-col justify-start flex-auto group">
			<view class="flex-col list space-y-30">
				<view class="flex-row items-center list-item" v-for="(item, index) in data.coupon_list" :key="index">
					<view class="flex-col justify-start shrink-0 section_3">
						<view class="group_3">
							<text class="font_5">￥</text>
							<text class="font_3">{{item.value}}</text>
						</view>
					</view>
					<view class="flex-col items-start flex-auto group_2 space-y-31">
						<text class="font_2">满{{item.face}}可用</text>
						<text class="font_6">{{item.expire}}</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper button" v-if="item.has!=1" @click="toGet(item.coupon_id)">
						<text class="font_4">领取</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper button active" v-else>
						<text class="font_4">已领取</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		nextTick,
		watch,
		onBeforeUnmount,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let interval
	const music = uni.createInnerAudioContext();
	onLoad((option) => {
		console.log(option);
		data.value.service_id = option.service_id
		getDate()
	})
	onShow(() => {

	})
	let data = ref({
		service_id: '',
		coupon_list: [],
	})

	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.ShopInfo.serviceDetail, {
			member_id: uni.getStorageSync('member_id') || '',
			service_id: data.value.service_id,
		}).then(res => {
			data.value.coupon_list = res.data.coupon_list
			if (res.flag == "success") {
				
			}
		})
	}
	
	const toGet = (coupon_id) => {
		proxy.$req.requestPOST(proxy.$api.ShopInfo.getCoupon, {
			member_id: uni.getStorageSync('member_id') || '',
			coupon_id: coupon_id,
		}).then(res => {
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if(res.flag=="success"){
				setTimeout(()=>{
					getDate()
				},1000)
			}
		})
	}
	const onChange = (e) => {
		data.value.currentSwiper = e.detail.current
	}
	const toOrder = () => {
		uni.navigateTo({
			url: '/pages/order/order?service_id=' + data.value.service_id
		})
	}
	const toCoupon = () => {
		uni.navigateTo({
			url: '/pages/coupon/coupon?service_id=' + data.value.service_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group {
			padding: 30rpx 0 12rpx;

			.list {
				margin: 0 30rpx;

				.list-item {
					padding: 22rpx 28rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.section_3 {
						padding: 48rpx 0;
						background-image: linear-gradient(90deg, #fe3b45 0%, #ff4f5b 100%),
							linear-gradient(90deg, #d6000f 0%, #ff4f5b 100%);
						border-radius: 20rpx;
						height: 148rpx;

						.group_3 {
							margin-left: 11rpx;
							margin-right: 18rpx;

							.font_5 {
								font-size: 43rpx;
								font-family: PingFangSC;
								line-height: 32rpx;
								color: #ffffff;
							}

							.font_3 {
								font-size: 65rpx;
								font-family: PingFangSC;
								line-height: 50rpx;
								color: #ffffff;
							}
						}
					}

					.group_2 {
						margin-left: 23rpx;

						.font_2 {
							font-size: 32rpx;
							font-family: PingFangSC;
							line-height: 30rpx;
							color: #333333;
						}

						.font_6 {
							font-size: 22rpx;
							font-family: PingFangHeiTC;
							line-height: 19rpx;
							color: #999999;
						}
					}

					.space-y-31 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 31rpx;
						}
					}

					.text-wrapper {
						flex-shrink: 0;
						margin-left: 40rpx;
						margin-right: 3rpx;

						.font_4 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 22rpx;
						}
					}

					.button {
						padding: 15rpx 0;
						border-radius: 16rpx;
						width: 110rpx;
						height: 56rpx;
						border: solid 2rpx #fe3b45;
						color: #fe3b45;
					}
					.active{
						border: solid 2rpx #999;
						.font_4{
							color: #999;
						}
					}
				}
			}

			.space-y-30 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 30rpx;
				}
			}
		}
	}
</style>